<template>
  <div class="shopcart-container">
    <div>

      <div class="titleBox flex">
        <p class="title">购物车</p>
        <button class="controlButton" @click="edit">{{isedit?'编辑':'完成'}}</button>
      </div>
      <div class="goods-list" v-if="total">
        <div class="mui-card" v-for="item in this.cart">
          <div class="mui-card-content">
            <div class="mui-card-content-inner flex">
              <div class="mui-input-row mui-checkbox mui-left">
                <label></label>
                <input type="checkbox" @click="selectChange(item)" v-model="item.selected" />
              </div>
              <div class="img_box" @click="detail(item)">
                <img :src="item.url" alt="" class="img" />
              </div>
              <p class='detail'>{{item.detail}}</p>
            </div>
            <div class="flex">
              <p class="price">{{item.price | money}}</p>
              <numbox :id='item.id' :count='item.count' class="numbox"></numbox>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="void-box">
        <div class="voidcart_img">
          <img src="../assets/iconfont/voidcart.png" alt="" class="img" />
        </div>
        <p class="void-text">您的购物车没有商品</p>
      </div>

    </div>

    <div class="pay-container">
      <div class="pay-content flex">
        <div class="mui-input-row mui-radio mui-left">
          <label>全选</label>
          <input name="radio1" type="radio" @click="selectAll">
        </div>
        <div class="totalPriceBox flex">
          <p class="total" style="color: #000000;">总计：</p>
          <p class="total">{{totalPrice | money}}</p>
        </div>
        <div class="payButtonBox">
          <button type="button" class="mui-btn mui-btn-danger payButton" @click="pay" v-if="isedit">结算<span
              class="mui-badge mui-badge-danger">({{totalSelected}})</span></button>
          <button type="button" class="mui-btn mui-btn-danger payButton" @click="del" v-else>删除<span
              class="mui-badge mui-badge-danger">({{totalSelected}})</span></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import numbox from '../components/num_box.vue'
  import {
    mapState,
    mapGetters
  } from 'vuex'
  import BScroll from 'better-scroll'
  export default {
    data() {
      return {
        isedit: true,
        isSelectAll: false
      }
    },
    components: {
      numbox
    },
    computed: {
      ...mapState('shopcart', ['cart']),
      ...mapGetters('shopcart', {
        total: 'getTotalGoodsCount',
        totalPrice: 'getTotalPrice',
        totalSelected: 'getTotalSelected'
      }),
    },
    mounted() {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.scroll = new BScroll('.shopcart-container', {
          click: true,
          mouseWheel: true
        })
      })
    },
    methods: {
      selectChange(item) {
        item.selected = !item.selected
      },
      selectAll() {
        this.isSelectAll = !this.isSelectAll
        if (this.isSelectAll) {
          this.cart.forEach(item => item.selected = true)
        } else {
          this.cart.forEach(item => item.selected = false)
        }
      },
      edit() {
        this.isedit = !this.isedit
      },
      del() {
        //js的数组删除只能用splice不指定数量就删完了，pop只能删最后一个
        var arr = []
        this.cart.forEach(item => {
          if (!item.selected) {
            arr.push(item)
          }
        })
        this.$store.commit('shopcart/delShopcart', arr)
      },
      pay() {
        if (this.totalSelected) {
          this.$router.push('/pay')
          this.$store.state.onHomePage = false
        }
      },
      detail(item){
        this.$router.push(item.path)
      }
    },
    filters: {
      money(str) {
        return '¥' + str
      }
    },
    watch: {

    }
  }
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .shopcart-container {
    height: 850px;
    overflow: hidden;
    background: #eee;
  }

  .titleBox {
    height: 70px;
  }

  .title {
    color: #000000;
    font-size: 30px;
    font-weight: 550;
    padding-left: 20px;
    margin-top: 17px;
  }

  .controlButton {
    color: #878586;
    background: #eee;
    border: none;
    position: fixed;
    right: 20px;
    top: 25px;
  }

  .mui-card {
    height: 150px;
  }

  .img_box {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }

  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .price {
    font-size: 20px;
    color: brown;
    margin-left: 85px;
    margin-top: 5px;
  }

  .numbox {
    margin-left: 140px;
  }

  .detail {
    color: #000000;
    font-size: 15px;
  }

  .void-box {
    width: auto;
    height: 400px;
    text-align: center;
    padding-top: 50px;
  }

  .void-text {
    font-size: 25px;
  }

  .voidcart_img {
    width: 150px;
    height: 150px;
    margin: 1px auto;
  }

  .pay-container {
    width: 100%;
    height: 110px;
    background: white;
    padding-top: 12px;
    position: fixed;
    bottom: 30px;
  }

  .total {
    font-size: 20px;
    color: brown;
  }

  .totalPriceBox {
    margin-top: 8px;
    margin-left: 90px;
  }

  .payButtonBox {
    position: fixed;
    right: 10px;
  }
</style>
